<html>
<head>
  <meta charset="utf-8">
  <title>Layselect Demo</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- 引入 layui.css -->
	<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>
<blockquote class="layui-elem-quote">
	<h1>Layselect 展示示例</h1>
	<div>作者：Darker.Wang</div>
	<div>联系：872694792@qq.com</div>
	<div><p>背景：项目过程中，select的下拉框的数据基本是可配置的，之前使用easyui时对select的数据通过一个url即可获取到数据，非常方便，切换到layui没有相应的功能。特写了这个组件，需要的自行下载引用</p></div>
	<div><p>使用方式：将layselect.js文件放到项目中指定的位置（也可直接放到layui的lay文件夹中直接使用），放到其他第放的遵循layui使用规范，如下：
	</br>layui.config({
		  base: '../js/layui_exts/'
		}).extend({
		  regionSelect: 'regionSelect/regionSelect'
		}).use([''],function(){})</p></div>
</blockquote>
<form class="layui-form layui-form-pane" action="" id="productForm">
  <div class="layui-form-item">
    <div class="layui-inline">
	    <label class="layui-form-label">分组展示</label>
	    <div class="layui-input-inline">
	      <select name="unit" id="unit" lay-filter="unit" multiple="multiple"></select>
	    </div>
    </div>
    <div class="layui-inline">
	    <label class="layui-form-label">一般展示</label>
	    <div class="layui-input-inline">
	      <select name="subjectType" id="subjectType" lay-filter="subjectType"></select>
	    </div>
    </div>
	<div class="layui-inline">
	    <label class="layui-form-label">禁用映射</label>
	    <div class="layui-input-inline">
	      <select name="forbiType" id="forbiType" lay-filter="forbiType"></select>
	    </div>
	</div>
  </div>
  <div class="layui-form-item">
  	<div class="layui-inline">
   	 	<label class="layui-form-label">联动类型</label>
	    <div class="layui-input-inline">
	      <select name="producttype1" id="producttype1" lay-filter="producttype1"></select>
	    </div>
    </div>
    <div class="layui-inline">
	    <div class="layui-input-inline">
	      <select name="producttype2" id="producttype2" lay-filter="producttype2"></select>
	    </div>
    </div>
    <div class="layui-inline">
	    <div class="layui-input-inline">
	      <select name="productType" id="productType" lay-filter="productType"></select>
	    </div>
  	</div>
  </div>
  <div style="font-size:18px;margin-left:10px;">码云地址：<a href="https://gitee.com/godbirds/layselect">https://gitee.com/godbirds/layselect</a></div>
  <div style="font-size:18px;margin-left:10px;">云服务器：<a href="https://www.aliyun.com/activity/ambassador/share-mck?userCode=b2yi9nin">《助力上云飞起来》</a></div>
</form>
<!-- 引入 layui.js -->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
//如果放到layui.lay中，不用config引入，当成原生组件layui.use直接使用
layui.config({
	base:'js/modules/'
}).extend({
	layselect:'layselect'
}).use(['jquery','form','layselect'], function(){
	var select = layui.layselect,$=layui.jquery,form=layui.form;
		console.log(select);
		select.render({
			  elem:"#unit",
			  url:'json/groupshow.json',//归属类型
		  });
		select.render({
			  elem:"#subjectType",
			  url:'json/common.json',//归属类型
			  format:function(data){
				  console.log(data);
				  return data;
			  }
		  });
		  select.render({
			  elem:"#forbiType",
			  url:'json/forbidden.json',//店铺列表
			  format:function(row){
				  return{
					  code:row.id,
					  status:row.status,
					  codeName:row.name
				  };
			  }
		  });
		  select.render({
			  elem:"#producttype1",
			  url:'json/producttype.json',//产品类型
			  onselect:function(value){//优先级高于form.on(select(obj))
				  $('#producttype2').empty();//二级先清空，否则加载不到时还是原来的，根据需求清空
				  select.render({
					  elem:"#producttype2",//加载二级类型
					  url:'json/producttype-'+value+".json",
					  onselect:function(value2){
						  console.log("value="+value+"value2="+value2)
						  $('#productType').empty();//同时清空实际产品类型
						  select.render({
							  elem:"#productType",//加载明细类型(三级菜单)
							  url:'json/producttype-'+value+'-'+value2+'.json'
						  });
					  }
				  });
			  }
		  });
	});
</script>
</html>